<template>
  <div class="page_box">
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        @change="checkChange"
      />
    </van-dropdown-menu>
    <div class="middle_box">
      <van-checkbox-group v-model="result">
        <div class="check_box" v-for="(item, index) in dataList" :key="index">
          <van-checkbox
            :name="item.tyshxydm"
            @click="resultChange"
            v-if="value1 == '0'"
          >
          </van-checkbox>
          <div class="right_box">
            <div class="company_name">{{ item.qymc }}</div>
            <div class="company_tyshxydm">
              {{ item.tyshxydm }}
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <div class="bottom_box" v-if="value1 == '0'">
      <div>
        <van-checkbox-group v-model="SelectAll">
          <van-checkbox name="SelectAll" @click="SelectAllChange"
            >全选</van-checkbox
          >
        </van-checkbox-group>
      </div>
      <div class="go_sub">
        <div class="khjl_btn" @click="goApply">认证企业</div>
      </div>
    </div>
  </div>
</template>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
import {
  isNoRecognitionQyxx,
  companyInfoList,
  idCardCompanyInfoAdd,
} from "@/interfaces/authorize";

export default {
  name: "" /*1. Vue扩展 */,
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {} /* 2. Vue数据 */,
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      dataList: [],
      SelectAll: [],
      value1: "0",
      result: [],
      option1: [
        { text: "未认证", value: "0" },
        { text: "已认证", value: "1" },
      ],
    };
  },
  computed: {},
  watch: {} /* 3. Vue资源 */, // watch 监控的是 props 和 data，有必要时监控computed
  filters: {},
  directives: {} /* 4. Vue生命周期 */,
  created() {
    this.getList();
  },
  mounted() {},
  destroy() {} /* 5. Vue方法 */,
  methods: {
    checkChange() {
      console.log(this.value1, "value1value1");
      this.getList();
    },
    async goApply() {
      let userId = this.getUrlParam("userId");
      let resultList = [];
      for (let i in this.result) {
        resultList.push(this.dataList[i]);
      }
      let parmas = {
        source: "镇江市",
        userId: userId,
        idCardCompanyInfoList: resultList,
      };
      console.log(parmas, "parmasparmas");
      const res = await idCardCompanyInfoAdd(parmas);
      console.log(res);
      if (res.code == 200) {
        this.$toast(res.msg);
        setTimeout(function () {
        wx.miniProgram.navigateBack({ delta: 1});
        }, 1000);
      }
    },
    resultChange() {
      if (this.result.length >= this.dataList.length) {
        this.SelectAll = ["SelectAll"];
      } else {
        this.SelectAll = [];
      }
    },
    SelectAllChange() {
      this.result = [];

      if (this.SelectAll.length == 0) {
      } else {
        for (let i in this.dataList) {
          this.result.push(this.dataList[i].tyshxydm);
        }
      }
    },
    async getList() {
      let userId = this.getUrlParam("userId");
      let params = {
        // batchNo: this.data.batchNo,
        // isDivider: this.data.checkScreen
        source: "镇江市",
        userId: userId,
      };
      if (this.value1 == "0") {
        console.log(params, "paramsparams");
        const res = await isNoRecognitionQyxx(params);
        console.log(res, "调接口了");
        this.dataList = res.data;
      } else {
        console.log(params, "paramsparams");
        const res = await companyInfoList(params);
        console.log(res, "调接口了");
        this.dataList = res.data;
      }
    },
    getUrlParam(name) {
      const queryStr = String(window.location).split("?")[1] || "";
      name = encodeURIComponent(name);
      let arr = new RegExp("(^|&)" + name + "=([^&]*)(&|$)").exec(queryStr);
      if (arr) {
        return decodeURIComponent(RegExp.$2);
      } else {
        return "";
      }
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.page_box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  .middle_box {
    flex: 1;
    width: 100%;
    // background: rgb(241, 204, 204);
    padding: 10px;
    overflow: auto;
    .check_box {
      display: flex;
    }
  }
  .bottom_box {
    width: 100%;
    height: 70px;
    // background: aqua;
    border-top: 1rpx solid #ececec;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;

    box-shadow: 0px 0px 10px 10px rgba(83, 83, 83, 0.1);
  }
  .right_box {
    padding: 10px 5px;
    flex: 1;
    border-bottom: 1px solid rgb(230, 224, 224);
    .company_name {
      font-weight: bold;
    }
  }
  .company_tyshxydm {
    font-size: 14px;
    color: gray;
    margin-top: 5px;
  }
  .khjl_btn {
    width: 90px;
    height: 35px;
    text-align: center;
    line-height: 32px;
    background: #e4efff;
    border-radius: 4px;
    color: #fff;
    background: #1989fa;
    font-size: 14px;
  }
}
</style>
